﻿<template>
  <div class="form-container">
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="temp"
      label-position="right"
      class="form-container"
    >
      <sticky
        v-if="isPreview === false"
        :z-index="10" :class-name="'sub-navbar draft'">
        <el-button
          v-loading="loading"
          style="margin-left: 10px;"
          type="primary"
          @click="isEdit === false ? createData() : updateData()"
        >保存</el-button>
      </sticky>
      <div class="form-main-container">
        <el-row v-if="false">
          <el-input v-model="temp.id" type="hidden" />
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="120px" label="父节点:" prop="parentId" class="form-container-item">
              <el-select v-model="temp.parentId" placeholder="请选择" clearable @clear="handleClear" ref="selectParent" >
                <el-tree
                  :data="shelfInformations"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  :check-on-click-node="true"
                  @node-click="handleNodeClick"
                >
                </el-tree>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="库位:" prop="warehouseLocationId" class="form-container-item">
              <el-select v-model="temp.warehouseLocationId" placeholder="请选择" clearable @clear="handleWarehouseLocationClear" ref="selectWarehouseLocation" >
                <el-tree
                  :data="warehouseLocations"
                  :props="defaultProps"
                  :expand-on-click-node="false"
                  :check-on-click-node="true"
                  @node-click="handleWarehouseLocationNodeClick"
                >
                </el-tree>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="递归节点:" prop="recursion" class="form-container-item">
              <el-input v-model="temp.recursion" :disabled="true"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="120px" label="编码:" prop="code" class="form-container-item">
              <el-input v-model="temp.code" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="名称:" prop="name" class="form-container-item">
              <el-input v-model="temp.name" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="长度:" prop="length" class="form-container-item">
              <el-input-number v-model="temp.length" :min="0" :max="100" label="描述文字" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>          
          <el-col :span="8">
            <el-form-item label-width="120px" label="宽度:" prop="width" class="form-container-item">
              <el-input-number v-model="temp.width" :min="0" :max="100" label="描述文字" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="高度:" prop="height" class="form-container-item">
              <el-input-number v-model="temp.height" :min="0" :max="100" label="描述文字" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="条码:" prop="barCode" class="form-container-item">
              <el-input v-model="temp.barCode" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>          
          <el-col :span="8">
            <el-form-item label-width="120px" label="货架号全称:" prop="fullName" class="form-container-item">
              <el-input v-model="temp.fullName" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="面积:" prop="area" class="form-container-item">
              <el-input-number v-model="temp.area" :min="0" :max="100" label="描述文字" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="120px" label="已使用面积:" prop="usedArea" class="form-container-item">
              <el-input-number v-model="temp.usedArea" :min="0" :max="100" label="描述文字" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>          
          <el-col :span="8">
            <el-form-item label-width="120px" label="状态:" prop="status" class="form-container-item">
              <el-select style="width:100%;" v-model="temp.status" placeholder="请选择状态">
                <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import Sticky from '@/components/Sticky' // 粘性header组件
import { create, get, update, getAll as getAllShelfInformation } from '@/api/shelfInformation'
import { getAll } from '@/api/warehouseLocation'

export default {
  name: 'ShelfInformationDetail',
  components: { Sticky },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    isPreview: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      temp: {
        id: null,
        parentId: null,
        warehouseLocationId: null,
        recursion: '',
        code: '',
        name: '',
        length: 0,
        width: 0,
        height: 0,
        barCode: '',
        fullName: '',
        area: 0,
        usedArea: 0,
        status: 0
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '添加'
      },
      rules: {
        length: [{ required: true, message: '长度必须填写', trigger: 'blur' }],
        width: [{ required: true, message: '宽度必须填写', trigger: 'blur' }],
        height: [{ required: true, message: '高度必须填写', trigger: 'blur' }],
        area: [{ required: true, message: '面积必须填写', trigger: 'blur' }],
        usedArea: [{ required: true, message: '已使用面积必须填写', trigger: 'blur' }],
        status: [{ required: true, message: '状态必须填写', trigger: 'blur' }],
      },
      downloadLoading: false,
      loading: false,
      tempRoute: {},
      warehouseInformationOptions: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      shelfInformations: [],
      statusOptions: [
        {
          value: 0,
          label: '空闲'
        },
        {
          value: 1,
          label: '部分使用'
        },
        {
          value: 2,
          label: '全部使用'
        }
      ]
    }
  },
  created() {
    this.tempRoute = Object.assign({}, this.$route)
    if (this.isEdit) {
      const id = this.$route.params && this.$route.params.id
      this.handleUpdate(id)
    } else {
      this.handleCreate()
    }

    getAll().then(response => {
      this.warehouseLocations = this.warehouseLocationsToTreeData(response.data)
    })
    
    getAllShelfInformation().then(response => {
      this.shelfInformations = this.shelfInformationsToTreeData(response.data)
    })
  },
  methods: {
    resetTemp() {
      this.temp = {
        parentId: null,
        warehouseLocationId: null,
        recursion: '',
        code: '',
        name: '',
        length: 0,
        width: 0,
        height: 0,
        barCode: '',
        fullName: '',
        area: 0,
        usedArea: 0,
        status: 0
      }
    },
    handleCreate() {
      this.resetTemp()
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          create(this.temp).then(() => {
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
              duration: 2000
            })
          }).catch(err => {
            console.log(err)
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    handleUpdate(id) {
      get(id).then(response => {
        this.temp.id = response.data.id
        this.temp.parentId = response.data.parentId
        this.temp.warehouseLocationId = response.data.warehouseLocationId
        this.temp.recursion = response.data.recursion
        this.temp.code = response.data.code
        this.temp.name = response.data.name
        this.temp.length = response.data.length
        this.temp.width = response.data.width
        this.temp.height = response.data.height
        this.temp.barCode = response.data.barCode
        this.temp.fullName = response.data.fullName
        this.temp.area = response.data.area
        this.temp.usedArea = response.data.usedArea
        this.temp.status = response.data.status
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.setTagsViewTitle()
          this.$refs['dataForm'].clearValidate()
        })
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          const tempData = Object.assign({}, this.temp)
          const { id } = this.temp
          update(id, tempData).then(() => {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    setTagsViewTitle() {
      const title = '编辑'
      const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.temp.id}` })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    handleNodeClick(data) {
      this.temp.parentId = data.id
      this.temp.recursion = data.recursion + '-' + data.id
      this.$refs.selectParent.blur()
    },
    handleClear () {
      this.temp.parentId = null
      this.temp.recursion = ''
    },
    shelfInformationsToTreeData(data) {
      const result = []

      if (data) {
        const level1Nodes = data.filter(f => f.parentId === null || f.parentId === '00000000-0000-0000-0000-000000000000')
        level1Nodes.forEach((item, index) => {
          const node = {
            id: item.id,
            name: item.name,
            recursion: item.recursion,
            children: []
          }
          result.push(node)
          this.shelfInformationsToTreeDataLoadChildren(node, data)
        })
      }

      return result
    },
    shelfInformationsToTreeDataLoadChildren(node, data) {
      if (data && node) {
        const childrenNodes = data.filter(f => f.parentId === node.id)
        if (childrenNodes) {
          childrenNodes.forEach((item, index) => {
            const childrenNode = {
              id: item.id,
              name: item.name,
              recursion: item.recursion,
              children: []
            }
            node.children.push(childrenNode)
            this.shelfInformationsToTreeDataLoadChildren(childrenNode, data)
          })
        }
      }
    },
    handleWarehouseLocationNodeClick(data) {
      this.temp.warehouseLocationId = data.id
      this.$refs.selectWarehouseLocation.blur()
    },
    handleWarehouseLocationClear () {
      this.temp.warehouseLocationId = null
    },
    warehouseLocationsToTreeData(data) {
      const result = []

      if (data) {
        const level1Nodes = data.filter(f => f.parentId === null || f.parentId === '00000000-0000-0000-0000-000000000000')
        level1Nodes.forEach((item, index) => {
          const node = {
            id: item.id,
            name: item.name,
            recursion: item.recursion,
            children: []
          }
          result.push(node)
          this.warehouseLocationsToTreeDataLoadChildren(node, data)
        })
      }

      return result
    },
    warehouseLocationsToTreeDataLoadChildren(node, data) {
      if (data && node) {
        const childrenNodes = data.filter(f => f.parentId === node.id)
        if (childrenNodes) {
          childrenNodes.forEach((item, index) => {
            const childrenNode = {
              id: item.id,
              name: item.name,
              recursion: item.recursion,
              children: []
            }
            node.children.push(childrenNode)
            this.shelfInformationsToTreeDataLoadChildren(childrenNode, data)
          })
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.form-container {
  position: relative;

  .form-main-container {
    padding: 40px 45px 20px 50px;

    .form-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .form-container-item {
        float: left;
      }
    }
  }
}
</style>
